<template>
  <div class="row-detail">
    <div class="header">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="1"></el-tab-pane>
        <el-tab-pane label="请求头" name="2"></el-tab-pane>
        <el-tab-pane label="输入参数" name="3"></el-tab-pane>
        <el-tab-pane label="输出参数" name="4"></el-tab-pane>
        <el-tab-pane label="版本清单" name="5" v-if="showVersion"></el-tab-pane>
        <el-tab-pane label="编排图" name="6" v-if="showNlbp"></el-tab-pane>
          <el-tab-pane label="脚本内容" name="8" v-if="showScript"></el-tab-pane>
        <el-tab-pane label="自定义路由" name="7" v-if="serverReleaseType==9"></el-tab-pane>
        <el-tab-pane label="数据详情" name="9" ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="body">
      <el-form v-if="activeName === '1'">
        <el-row>
          <el-col :span="10">
            <el-form-item label="能力名称:">
              {{ csfbInfo.serviceName }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="能力编码:">
              {{ csfbInfo.serviceCode }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="所属分类:">
              {{ csfbInfo.cateName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="服务主版本:">
              {{ "V" + csfbInfo.serviceMasterVersion }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="服务状态:">
              <status-tag :status="csfbInfo.serviceStatus" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="能力描述:">
              {{ csfbInfo.serviceDesc }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="10">
            <el-form-item label="能力类型:">
              {{ selectDictLabel(protocolTypeList, csfbInfo.serviceType) }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="请求方式:">
              {{ csfbInfo.httpRequestMethod }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="请求路径:">
              {{ csfbInfo.mockUrl }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="csfbInfo.serviceType === '3'">
          <el-col :span="10">
            <el-form-item label="JMS数据源：">
              {{ csfbInfo.jmsDatasourceCode }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="消息类型：">
              {{ csfbInfo.jmsType === "queue" ? "Queue" : "Topic" }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="csfbInfo.serviceType === '3'">
          <el-col :span="10">
            <el-form-item
              :label="
                csfbInfo.jmsType === 'queue' ? 'Queue名称：' : 'Topic名称：'
              "
            >
              {{ csfbInfo.jmsDestinationName }}
            </el-form-item>
          </el-col>
          <!-- <el-col :span="10">
            <el-form-item label="消息类型：">
              {{ csfbInfo.jmsRole === 'C' ? '消费者' : '生产者' }}
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="限流开关:">
              {{ csfbInfo.limitCtrlStatus === "0" ? "开" : "关" }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="限流方式:">
              {{ csfbInfo.limitCtrlType === "1" ? "QPS" : "线程数" }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="限流阈值:">
              {{ csfbInfo.limitCtrlParamval }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="预警响应时间:">
              {{ csfbInfo.alarmSecs + " 秒" }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="超时时间:">
              {{ csfbInfo.timeoutSecs + " 秒" }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="失败重试次数:">
              {{ csfbInfo.alarmSecs }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="创建人:">
              {{ csfbInfo.createBy }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="创建时间:">
              {{ csfbInfo.createTime }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="更新人:">
              {{ csfbInfo.updateBy }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="更新时间:">
              {{ csfbInfo.updateTime }}
            </el-form-item>
          </el-col>
        </el-row>
        <template v-if="serverReleaseType === '1' || serverReleaseType === '3'">
          <el-row>
            <el-col :span="10">
              <el-form-item label="API名称:">
                {{ (csfbInfo.apiDomain && csfbInfo.apiDomain.apiName) || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="API编码:">
                {{ (csfbInfo.apiDomain && csfbInfo.apiDomain.apiCode) || "" }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="API版本:">
                {{
                  "V" +
                  ((csfbInfo.apiDomain && csfbInfo.apiDomain.apiVersion) || "")
                }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="API描述:">
                {{ (csfbInfo.apiDomain && csfbInfo.apiDomain.apiDesc) || "" }}
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template v-if="serverReleaseType === '4'">
          <el-row>
            <el-col :span="12">
              <el-form-item label="数据集名称：">
                {{ (csfbInfo.datasetDomain && csfbInfo.datasetDomain.datasetName) || "" }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="查询SQL：">
                {{ (csfbInfo.datasetDomain && csfbInfo.datasetDomain.selectSql) || "" }}
              </el-form-item>
            </el-col>
          </el-row>
        </template>
      </el-form>
      <step-qqt v-if="activeName === '2'" />
      <step-srcs v-if="activeName === '3'" />
      <step-sccs v-if="activeName === '4'" />
      <template v-if="activeName === '5'">
        <el-table style="margin: 10px 0" row-key="nodeId" :data="versionList">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="版本号" prop="serviceVerId">
            <template #default="scope">
              <div>
                <span>{{
                  scope.row.serviceVersion ? `V${scope.row.serviceVersion}` : ""
                }}</span>
                <el-tag
                  size="mini"
                  v-if="row.serviceMasterVersion === scope.row.serviceVersion"
                  >主</el-tag
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="版本描述"
            prop="serviceVerDesc"
            show-overflow-tooltip
            min-width="150"
          />
          <el-table-column
            label="请求方式"
            align="center"
            width="80"
            prop="httpRequestMethod"
          />
          <el-table-column label="状态" align="center" width="80">
            <template #default="scope">
              <status-tag :status="scope.row.serviceStatus" />
            </template>
          </el-table-column>
          <el-table-column label="更新者" prop="updateBy" />
          <el-table-column label="更新时间" prop="updateTime" />
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="handleClick"
        />
        <div style="height: 16px"></div>
      </template>
      <step-nlbp isView v-if="activeName === '6'||activeName==='7'" :disabled="disabled"/>
       <step-script v-if="activeName === '8'" :disabled="true" />
      <el-form v-if="activeName === '9' && specifics">
        <el-row>
          <el-col :span="10">
            <el-form-item label="结果状态:">
              {{ specifics.proccessStatus }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="URL:">
              {{ specifics.url }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="类名:">
              {{ specifics.className }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="错误信息:">
              {{ specifics.errorMsg }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState} from 'pinia';
import {serviceStore} from '@slc/store/service';

import { searchVersion, searchCsLog} from "@slc/api/slc/inventory";
import StatusTag from './status-tag.vue';
import StepQqt from './step-qqt.vue';
import StepSrcs from './step-srcs.vue';
import StepSccs from './step-sccs.vue';
import StepScript from './step-script.vue';

export default {
  components: {
    StatusTag,
    StepQqt,
    StepSrcs,
    StepSccs,
      StepScript
    // StepNlbp: () => import("./step-nlbp"),
  },
  name: "row-details",
  props: {
    row: {
      type: Object,
      default: () => {},
    },
      showScript: {
        type: Boolean,
        default: false,
      },
    showVersion: {
      type: Boolean,
      default: true,
    },
    showNlbp: {
      type: Boolean,
      default: false,
    },
    visible: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      activeName: "1",
      versionList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      disabled: false,
      specifics: {},
    };
  },
  computed: {
    ...mapState(serviceStore, [
      "csfbInfo",
      "keyTypeList",
      "protocolTypeList",
      "serverReleaseType",
    ]),
  },
  watch: {
    visible(val) {
      if (!val) {
        this.activeName = "1";
      }
    },
  },
  methods: {
    async handleClick() {
      if (this.activeName === "5" || this.activeName === '9') {
        const res = await searchVersion({
          ...this.queryParams,
          serviceId: this.csfbInfo.serviceId,
        });
        this.versionList = res.data.list || [];
        this.total = res.data.total;
      }else if(this.activeName === '7'){
        this.disabled = true
      }
      if(this.versionList && this.versionList.length > 0) {
        const requestParams = new FormData();
        this.versionList.forEach((item, index) => {
          requestParams.append(`serviceVerId`, item.serviceVerId);
          requestParams.append(`type`, 1);
        });
        try {
          const response = await searchCsLog(requestParams, {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
          });
          this.specifics = response.data;
          if(this.specifics && this.specifics.proccessStatus) {
            if (this.specifics.proccessStatus === 200) {
              this.specifics.proccessStatus = "成功";
            } else if (this.specifics.proccessStatus === 500) {
              this.specifics.proccessStatus = "失败";
            }
          }
        } catch (error) {
          console.error("Error fetching csLog:", error);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.row-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  .header {
    height: 54px;
  }
  .body {
    flex: 1;
  }
}
.el-form-item {
  margin-bottom: 0px;
}
</style>
